---
title: Wheel Gestures
description: Learn how to add this Wheel Gesture plugin to Embla Carousel
order: 5
date: 2021-11-22
---

import { Tabs } from 'components/Tabs/Tabs'
import { TabsItem } from 'components/Tabs/TabsItem'
import { TABS_PACKAGE_MANAGER } from 'consts/tabs'

# Wheel Gestures

<RepositoryLink to="https://github.com/xiel/embla-carousel-wheel-gestures">
  View plugin on GitHub
</RepositoryLink>

This plugin is used to extend Embla Carousel with the ability to **use the mouse/trackpad wheel** to **navigate** the carousel.

---

## Installation

First you need to install the **npm package** and save it to your dependencies:

<Tabs groupId={TABS_PACKAGE_MANAGER.GROUP_ID}>
  <TabsItem tab={TABS_PACKAGE_MANAGER.TABS.CDN}>

    ```html
    <script src="https://unpkg.com/embla-carousel-wheel-gestures/dist/embla-carousel-wheel-gestures.umd.js"></script>
    ```

  </TabsItem>
  <TabsItem tab={TABS_PACKAGE_MANAGER.TABS.NPM}>

    ```shell
    npm install embla-carousel-wheel-gestures --save
    ```

  </TabsItem>
  <TabsItem tab={TABS_PACKAGE_MANAGER.TABS.YARN}>

    ```shell
    yarn add embla-carousel-wheel-gestures
    ```

  </TabsItem>
</Tabs>

## Usage

This plugin accepts a single **optional** parameter, which is its [options](/plugins/wheel-gestures/#options) object that allows you to configure it.

```js
import EmblaCarousel from 'embla-carousel'
import { WheelGesturesPlugin } from 'embla-carousel-wheel-gestures'

const embla = EmblaCarousel(emblaRoot, { loop: false }, [WheelGesturesPlugin()]) // Add plugin
```

## Options

Below follows an exhaustive **list of all** `Wheel Gestures` **options** and their default values.

---

### wheelDraggingClass

Type: <BrandPrimaryText>`string`</BrandPrimaryText>  
Default: <BrandSecondaryText>`is-wheel-dragging`</BrandSecondaryText>

Choose a classname that will be applied to the container during a wheel gesture. Pass an empty string to opt-out.

---

### forceWheelAxis

Type: <BrandPrimaryText>`string | undefined`</BrandPrimaryText>  
Default: <BrandSecondaryText>`undefined`</BrandSecondaryText>

Force an axis on which to listen for wheel events. Choose scroll axis between `x` and `y`. Useful if you want to slide horizontally when scrolling vertically or vice versa.

---

### target

Type: <BrandPrimaryText>`Element`</BrandPrimaryText>  
Default: <BrandSecondaryText>`undefined`</BrandSecondaryText>

Specify the element that should be observed for wheel events.

---
